<template>
	<view class="content">
		<view class="formBox boxShadow">
			<view class="f-c-fs">
        <view class="label">状态：</view>
        <view class="value">{{ detail.statusStr }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">展示区域：</view>
        <view class="value">{{ detail.showAreaStr }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">商品类型：</view>
        <view class="value">{{ detail.goodsServerTypeStr }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">商品名称：</view>
        <view class="value">{{ detail.goodsServerName }}</view>
      </view>
		</view>
		<view class="formBox"> 
			<view class="item  f-c-sa">
        <view class="">
          <view class="itemTitle">商品总库存</view>
          <view class="num">{{ detail.stockNumber }}</view>
        </view>
				<view class="line"></view>
        <view class="">
          <view class="itemTitle">剩余库存
          </view>
          <view class="num">{{ detail.surplusNumber }}</view>
        </view>
        <view class="line"></view>
        <view class="">
          <view class="itemTitle">已购买总数
          </view>
          <view class="num">{{ detail.purchaseNumber }}</view>
        </view>
      </view>
    </view>
    <view style="padding:20rpx">
      <u-subsection :current="current" :list="list" @change="sectionChange"></u-subsection>
    </view>
    <view style="padding:20rpx">
      <u-search v-model="shopList[current].listQuery.param" :show-action="false" bg-color="#fff" placeholder="请输入手机号"
                @search="search"></u-search>
    </view>
    <view class=" formBox">
      <scroll-view scroll-x="true" class="table">
        <uni-table border stripe emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th v-for="(item, index) in tableTh" :key="index" align="center">{{ item }}</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,index) in shopList[current].list" :key="index">
            <uni-td>
              <image :src="item.wxUrl" class="avatar" mode=""></image>
            </uni-td>
            <uni-td>{{ item.wxName }}</uni-td>
            <uni-td>{{ item.customerProperty }}</uni-td>
            <uni-td>{{ item.phone }}</uni-td>
            <uni-td>{{ item.phoneModel }}</uni-td>
            <uni-td v-if="current==0">{{ item.amount }}</uni-td>
            <uni-td v-if="current==0">{{ item.payTime }}</uni-td>
            <uni-td v-if="current==1">{{ item.browseTime }}</uni-td>
            <uni-td v-if="current==1">{{ item.browseDuration | formatSeconds }}</uni-td>
          </uni-tr>


        </uni-table>
			</scroll-view>

		</view>
	</view>
</template>
<script>
import {goodsData, goodsDataList, showStoreList} from '@/api/index'

export default {
  data() {
    return {
      show: false,
      selectList: [],
      list: [
        {
          name: '已购买客户'
        },
        {
          name: '浏览客户'
        }
      ],
      current: 0,
      phone: '',
      loading: false,
      gsId: 0,
      detail: {},
      shopList: [
        {
          listQuery: {
            pageNo: 1,
            pageSize: 20,
            noData: true,
            param: ''
          },
          list: []
        },
        {
          listQuery: {
            pageNo: 1,
            pageSize: 20,
            noData: true,
            param: ''
          },
          list: []
        }
      ]
    };
  },
  filters: {
    formatSeconds(value) {
      var theTime = parseInt(value); // 需要转换的时间秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
          if (theTime2 > 24) {
            //大于24小时
            theTime3 = parseInt(theTime2 / 24);
            theTime2 = parseInt(theTime2 % 24);
          }
        }
      }
      var result = '';
      if (theTime > 0) {
        result = '' + parseInt(theTime) + '秒';
      }
      if (theTime1 > 0) {
        result = '' + parseInt(theTime1) + '分' + result;
      }
      if (theTime2 > 0) {
        result = '' + parseInt(theTime2) + '小时' + result;
      }
      if (theTime3 > 0) {
        result = '' + parseInt(theTime3) + '天' + result;
      }
      return result;
    }
  },
  computed: {
    tableTh() {
      return this.current == 0
          ? ['微信头像', '昵称/姓名', '客户性质', '手机号', '手机型号', '消费金额/次数', '最新支付时间']
          : ['微信头像', '昵称/姓名', '客户性质', '手机号', '手机型号', '浏览时间', '浏览时长'];
    }
  },
  onLoad(option) {
    this.gsId = JSON.parse(option.param).id;
    this.seckillDataFn();
    this.seckillDataListFn();
  },
  methods: {
    lookStore() {
      showStoreList({storeId: this.detail.joinStores}).then(res => {
        res.data.forEach((val, index) => {
          res.data[index].checkbox = true
        })

        this.selectList = res.data
      })
    },
    search() {
      this.shopList[this.current].listQuery.noData = true;
      this.shopList[this.current].listQuery.pageNo = 1;
      this.seckillDataListFn();
    },
    setPhone(e) {
      this.phone = this.phone.replace(/[^\d]/g, '');
    },
    sectionChange(e) {
      this.current = e;
      if (this.shopList[this.current].listQuery.noData && this.shopList[this.current].listQuery.pageNo == 1) {
        this.seckillDataListFn();
      }
    },
    scrolltolower(e) {
      if (this.shopList[this.current].listQuery.noData) {
        this.loading = true;
        this.seckillDataListFn();
      }
    },
    seckillDataFn() {
      goodsData({gsId: this.gsId}).then(res => {
        this.detail = res.data;
        this.lookStore()
      });
    },
    seckillDataListFn() {
      var data = {
        ...this.shopList[this.current].listQuery,
        gsId: this.gsId,
        useType: +this.current + 1
      };
      goodsDataList(data).then(res => {
        this.loading = false;
        if (this.shopList[this.current].listQuery.pageNo == 1) {
          this.shopList[this.current].list = res.data;
        } else {
          this.shopList[this.current].list = this.shopList[this.current].list.concat(res.data);
        }
        this.shopList[this.current].listQuery.pageNo += 1;
        if (this.shopList[this.current].listQuery.pageSize != res.data.length) {
          this.shopList[this.current].listQuery.noData = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
	.content{
		padding-top: 20rpx;
	}
.formBox{
	padding: 20rpx;
	.item{
		text-align: center;
		margin: 25rpx 0;
		.line{
			width: 2rpx;
			height: 74rpx;
			background-color: #dfdfdf;
		}
		.itemTitle{
			width: 102rpx;
			font-weight: 500;
			text-align: center;
			color: #131313;
			line-height: 36rpx;
		}
		.num{
			font-size: 30rpx;
      font-weight: bold;
      text-align: center;
      color: #ff6738;
      line-height: 36rpx;
    }
  }

  .table {
    // width: 300%;
  }
}

  .avatar {
    width: 50rpx;
    height: 50rpx;
    margin: 0 auto;
  }
</style>
